import React from 'react'
import './index.css'
import { CSSTransition,TransitionGroup } from 'react-transition-group'
class Tod extends React.Component{
    
         state={
             show:true,
             list:[]
         }
         handleClick=()=>{
              let show=this.state.show
              if(show===true){
                  this.setState({
                      show:false
                  })
              }else{
                  this.setState({
                     show: true
                  })
              }
        }
        handleChange=(pre)=>{
          
            this.setState((pre)=>{
                
               return{list:[...pre.list,'item']} 
            })
        }
        
    render(){
      
        return(
            <div>
             <CSSTransition
                      in={this.state.show} 
                      timeout={1000} //动画执行1秒
                      classNames='fade' //自定义的class名
                      unMountOnExit //可选，当动画出场后在页面上移除包裹的dom节点
                      onEntered={(el) => {
                            el.style.color='yellow'   //可选，动画入场之后的回调，el指被包裹的dom，让div内的字体颜色等于蓝色
                      }}
 
                >
                    <div>汤圆子</div>
                </CSSTransition>

            <button onClick={this.handleClick}>切换</button>
            <hr />
            <TransitionGroup>
            {
                this.state.list.map((item,index)=>{
                    return(
                        <CSSTransition

                      timeout={1000} //动画执行1秒
                      classNames='fade' //自定义的class名
                      unMountOnExit //可选，当动画出场后在页面上移除包裹的dom节点
                      onEntered={(el) => {
                            el.style.color='blue'   //可选，动画入场之后的回调，el指被包裹的dom，让div内的字体颜色等于蓝色
                      }}
 
                         >
                      <div>{item}</div>
            </CSSTransition>
                    )
                })
            }
            </TransitionGroup>
               

            <button onClick={this.handleChange}>click me!</button>
            </div>
        )
    }
}


export default Tod